<template>
	<view class="container">
		<u-sticky :offset-top="0">
			<view class="switch_wrap">
				<view class="switch_box">
					<view class="switch_item" @click="switchItem(0)">
						<view :class="['back_wrap', switchIndex == 0? 'back_left': '']"></view>
						<view class="text">
							<text class="desc">未结算</text>
							<u-icon name="error-circle" @click.native.stop="show_notice(0)"></u-icon>
						</view>
					</view>
					<view class="switch_item" @click="switchItem(1)">
						<view :class="['back_wrap', switchIndex == 1? 'back_right': '']"></view>
						<view class="text">
							<text class="desc">已结算</text>
							<u-icon name="error-circle" @click.native.stop="show_notice(1)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		
		
		<view class="order_content">
			<view class="order_item" v-for="item in orderList" :key="item.id">
				<view class="order_title">
					<text class="title_text">订单号：</text>
					<text class="title_orderId">{{item.orderId}}</text>
					<text class="copy_btn" @click="copy(item.orderId)">复制</text>
				</view>
				<view class="order_money_box">
					<view class="order_money_half">
						<text class="money_text">下单金额</text>
						<text class="money_desc">{{item.orderMoney}}</text>
					</view>
					<view class="order_money_half">
						<text class="money_text_num">佣金</text>
						<text class="money_desc_num">￥{{item.incomeMoney}}</text>
					</view>
				</view>
				<view class="uid_box">
					<text class="uid_text">UID：{{item.uid}}</text>
				</view>
			</view>
		</view>
		<noticePop ref="notice_pop"></noticePop>
	</view>
</template>

<script>
	import noticePop from './components/notice-pop.vue'
	export default {
		components: {
			noticePop
		},
		data() {
			return {
				switchIndex: 0,
				orderType: [
					{
						type: 0,
						title: '未结算提示',
						content: '用户收货后未产生退款可以获得佣金默认15天佣金可提现！'
					},
					{
						type: 1,
						title: '已结算提示',
						content: '结算金额会直接放入您的可提现余额里！'
					}
				],
				orderList: [
					{
						id: 1,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					},
					{
						id: 1,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					},
					{
						id: 1,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					},
					{
						id: 1,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					},
					{
						id: 1,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					},
					{ 
						id: 2,
						orderId: '2020202020202020',
						orderMoney: '100',
						incomeMoney: '1',
						uid: '888888'
					}
				]
			};
		},
		methods: {
			switchItem (index) {
				this.switchIndex = index;
			},
			copy (value) {
				uni.setClipboardData({
				    data: value
				})
			},
			show_notice (index) {
				this.$refs.notice_pop.open(this.orderType[index]);
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container{
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		
		.switch_wrap{
			width: 100%;
			background-color: #f7f7f7;
			padding: 20rpx 0;
		}
		
		.switch_box{
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 12rpx;
			padding: 0 24rpx;
			
			.switch_item{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 72rpx;
				position: relative;
				
				.back_wrap{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.text{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					z-index: 99;
					
					.desc{
						color: #020003;
						font-size: 28rpx;
						margin-right: 16rpx;
					}
				}
				
				@keyframes left {
					from{
						transform: translateX(100%);
					} to {
						transform: translateX(0);
					}
				}
				
				.back_left {
					width: 100%;
					height: 100%;
					animation: left 0.3s linear 0s;
				}
				.back_left::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 12rpx;
					background: #F0F0F0;
					transform: skewX(-25deg);
				}
				.back_left::before {
					content: "";
					position: absolute;
					top: 0;
					left: -24rpx;
					width: 100rpx;
					height: 100%;
					background: #F0F0F0;
					border-radius: 12rpx;
				}
				
				@keyframes right {
					from{
						transform: translateX(-100%);
					} to {
						transform: translateX(0);
					}
				}
				.back_right {
					width: 100%;
					height: 100%;
					animation: right 0.2s linear 0s;
				}
				.back_right::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 12rpx;
					background: #F0F0F0;
					transform: skewX(-25deg);
				}
				.back_right::before {
					content: "";
					position: absolute;
					top: 0;
					right: -24rpx;
					width: 100rpx;
					height: 100%;
					background: #F0F0F0;
					border-radius: 12rpx;
				}
				
			}
		}
		
		.order_content{
			
			.order_item{
				background-color: #fff;
				padding: 0 20rpx 20rpx 20rpx;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				
				.order_title{
					padding: 20rpx 0;
					border-bottom: 1rpx solid #F0F0F0;
					
					.title_text{
						color: #020003;
						font-size: 28rpx;
						text-align: center;
					}
					.title_orderId{
						color: #B1B4C3;
					}
					.copy_btn{
						color: #07AD18;
						font-size: 30rpx;
						padding-left: 40rpx;
					}
				}
				
				.order_money_box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #FFFAEA;
					border-radius: 20rpx;
					height: 120rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					margin: 20rpx 0;
					
					
					.order_money_half{
						display: flex;
						align-items: center;
						
						.money_text{
							font-size: 28rpx;
							padding-right: 30rpx;
						}
						.money_desc{
							font-size: 24rpx;
							color: #86909C;
						}
						
						.money_text_num{
							font-size: 28rpx;
							padding-right: 30rpx;
							color: #ff0000;
						}
						.money_desc_num{
							font-size: 28rpx;
							color: #ff0000;
						}
					}
				}
				.uid_box{
					text-align: right;
					
					.uid_text{
						color: #B1B4C3;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
